import React, { Component } from 'react'
import { Card, Button, notification } from 'antd'
import './ui.less'
export default class Notification extends Component {
  handleClick = (type, placement = 'topRight') => {
    notification[type]({
      placement,
      message: '发工资了！',
      description: '上月考勤22天， 迟到12天，实发工资250，请笑纳'
    })
  }
  render() {
    return (
      <div>
        <Card title="通知提醒框" className="card-wrap">
          <Button
            type="primary"
            className="btn-margin"
            onClick={() => {
              this.handleClick('success')
            }}
          >
            success
          </Button>
          <Button
            type="primary"
            className="btn-margin"
            onClick={() => {
              this.handleClick('info')
            }}
          >
            info
          </Button>
          <Button
            type="primary"
            className="btn-margin"
            onClick={() => {
              this.handleClick('warning')
            }}
          >
            warning
          </Button>
          <Button
            type="primary"
            className="btn-margin"
            onClick={() => {
              this.handleClick('error')
            }}
          >
            error
          </Button>
        </Card>
        <Card className="card-wrap" title="通知提醒框-方向控制">
          <Button
            className="btn-margin"
            type="primary"
            onClick={() => {
              this.handleClick('success', 'topLeft')
            }}
          >
            success-topleft
          </Button>
          <Button
            className="btn-margin"
            type="primary"
            onClick={() => {
              this.handleClick('info')
            }}
          >
            info-topright
          </Button>
          <Button
            className="btn-margin"
            type="primary"
            onClick={() => {
              this.handleClick('warning', 'bottomLeft')
            }}
          >
            warning-bottomLeft
          </Button>
          <Button
            className="btn-margin"
            type="primary"
            onClick={() => {
              this.handleClick('error', 'bottomRight')
            }}
          >
            error-bottomRight
          </Button>
        </Card>
      </div>
    )
  }
}
